import React, { useState, useEffect } from 'react'
import './index.modules.scss'
import SearchView from '@/components/searchView/index'
import { useLocation, useNavigate } from 'react-router-dom'
import {
  Space,
  Table,
  Button,
  Modal,
  Card,
  message,
  Input,
  Popconfirm,
  Pagination,
  Checkbox,
  Divider
} from 'antd'
import { LeftOutlined } from '@ant-design/icons'
import {
  storeInventory,
  storeInventorySerach,
  storeInventoryDelete,
  changeCount,
  storeInventoryCreateExcel
} from '@/http/api/store'
let pageData = {
  page: 1,
  size: 10,
  total: 0,
  status: 1,
  appid: localStorage.getItem('appid')
}
let _id = ''
let typeList = [
  {
    title: '质保编号',
    type: 'inpute',
    model: 'filmNo'
  },
  {
    title: '联系方式',
    type: 'inpute',
    model: 'deliverStorePhone'
  },
  {
    title: '产品类型',
    type: 'inpute',
    model: 'filmType'
  },
  {
    title: '产品名称',
    type: 'inpute',
    model: 'filmName'
  }
]
let checkBoxOptions = [
  {
    label: '已使用',
    value: '1'
  },
  {
    label: '未使用',
    value: '0'
  },
  {
    label: '已用完',
    value: '2'
  }
]
let selectedRowsdata = []
const App = () => {
  const [messageApi, contextHolder] = message.useMessage()
  useEffect(() => {
    getList()
  }, [])
  const Navigate = useNavigate()
  const location = useLocation()
  const [dataSource, setDataSource] = useState([])
  const [isShowAdd, setIsShowAdd] = useState(false)
  const [isShowDetils, setisShowDetils] = useState(false)
  const [detilsData, setDetilsData] = useState({})

  const columns = [
    {
      title: '收货时间',
      dataIndex: 'timeOfReceipt',
      align: 'center'
    },
    {
      title: '产品类型',
      dataIndex: 'filmType',
      align: 'center'
    },
    {
      title: '产品名称',
      dataIndex: 'filmName',
      align: 'center'
    },
    {
      title: '发货门店',
      dataIndex: 'deliverStoreName',
      align: 'center'
    },
    {
      title: '质保编号',
      dataIndex: 'filmNo',
      align: 'center'
    },
    {
      title: '质保年限',
      dataIndex: 'filmAge',
      align: 'center'
    },
    {
      title: '总贴膜次数',
      dataIndex: 'count',
      align: 'center'
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      render: (status) => {
        return (
          <div>
            {status == 0 ? '待使用' : status == 1 ? '已使用' : '使用完'}
          </div>
        )
      }
    },
    {
      title: '已使用次数',
      dataIndex: 'useCount',
      align: 'center'
    },
    {
      title: '未使用次数',
      dataIndex: 'unUseCount',
      align: 'center'
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (data) => (
        <Space size="middle">
          <Button
            onClick={() => {
              setisShowDetils(true)
              setDetilsData(data)
            }}
          >
            详情
          </Button>
          <Button
            type="primary"
            onClick={() => {
              showModalAdd(data)
              setDetilsData(data)
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title="删除"
            description="确定删除吗?"
            placement="top"
            onConfirm={() => {
              DeleteFn(data)
            }}
            onCancel={() => {
              message.error('取消删除')
            }}
            okText="是"
            cancelText="不"
          >
            <Button type="primary" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      )
    }
  ]
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      selectedRowsdata = selectedRows.map((item) => {
        return item._id
      })
    }
  }

  // 获取列表
  const getList = async () => {
    pageData.storeId = location.state.id
    const res = await storeInventory(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }

  const showModalAdd = (value) => {
    if (value._id) {
      setDetilsData(value)
      _id = value._id
    }
    setIsShowAdd(true)
  }
  const pageChangeFn = (page, pageSize) => {
    pageData.page = page
    pageData.size = pageSize
    getList()
  }
  // 删除
  const DeleteFn = async (data) => {
    const res = await storeInventoryDelete({ id: data._id })
    messageApi.success(res.data.messge)
    getList()
  }
  // 导出
  const exportExcel = async () => {
    const res = await storeInventoryCreateExcel({
      id: 'all',
      storeId: location.state.id
    })
    console.log(res)
    const url = window.URL.createObjectURL(new Blob([res.data]))
    const a = document.createElement('a')
    a.href = url
    a.download = '库存.xlsx'
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
  }
  const partexportExcel = async () => {
    const res = await storeInventoryCreateExcel({
      id: selectedRowsdata,
      storeId: location.state.id
    })
    console.log(res)
    const url = window.URL.createObjectURL(new Blob([res.data]))
    const a = document.createElement('a')
    a.href = url
    a.download = '库存.xlsx'
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
  }
  const porpsData = async (data) => {
    pageData = {
      page: 1,
      size: 10,
      total: 0,
      appid: localStorage.getItem('appid'),
      storeId: location.state.id,
      ...data
    }
    const res = await storeInventorySerach(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }
  const checkChangeFn = async (data) => {
    pageData.status = data
    const res = await storeInventorySerach(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }
  // 修改次数
  const changeCountFn = async () => {
    const res = await changeCount(detilsData)
    messageApi.success(res.data.messge)
    getList()
  }
  return (
    <div>
      <Card>
        <div className="headerTitle align_center">
          <LeftOutlined
            onClick={() => {
              Navigate(-1)
            }}
            style={{ fontSize: '50px' }}
          ></LeftOutlined>
          <div>门店名称：{location.state.name}</div>
        </div>
        <SearchView typeList={typeList} porpsData={porpsData}></SearchView>
        <div className="headerButton">
          <Checkbox.Group
            options={checkBoxOptions}
            defaultValue={['Pear']}
            onChange={checkChangeFn}
          />
          <div>
            <Button
              style={{
                marginRight: '10px'
              }}
              type="primary"
              onClick={() => {
                partexportExcel()
              }}
            >
              导出部分
            </Button>
            <Button
              type="primary"
              onClick={() => {
                exportExcel()
              }}
            >
              导出全部库存信息
            </Button>
          </div>
        </div>
        <Table
          rowSelection={{
            type: 'checkbox',
            ...rowSelection
          }}
          pagination={false}
          bordered
          rowKey="key"
          columns={columns}
          dataSource={dataSource}
        />
        <div className="Pagin">
          <Pagination
            onChange={pageChangeFn}
            defaultCurrent={pageData.page}
            total={pageData.total}
          />
        </div>
      </Card>
      <div>
        <Modal
          footer={[]}
          onCancel={() => {
            setIsShowAdd(false)
          }}
          open={isShowAdd}
        >
          <div className="detilsBox">
            <div className="heder">
              <div className="hederSize align_center">
                <div>收货时间：{detilsData.timeOfReceipt}</div>
                <div>收货人：{detilsData.storeName}</div>
              </div>
              <div className="headerMinBox align_center">
                <div className="MinBox">
                  <div className="title">产品类型</div>
                  <div className="size">{detilsData.filmType}</div>
                </div>
                <div className="MinBox">
                  <div className="title">产品名称</div>
                  <div className="size">{detilsData.filmName}</div>
                </div>
                <div className="MinBox">
                  <div className="title">产品数量</div>
                  <div className="size">{detilsData.number}</div>
                </div>
              </div>
              <Divider style={{ margin: '15px 0' }} />
              <div className="headerfoot">
                <div className="title">
                  质保编号：<span className="size">{detilsData.filmNo}</span>
                </div>
                <div className="title">
                  质保年限：<span className="size">{detilsData.filmAge}</span>
                </div>
                <div className="title" style={{ display: 'flex' }}>
                  总贴膜次数：
                  <Input
                    style={{ width: '90px', height: '20px' }}
                    placeholder="请输入"
                    defaultValue={detilsData.count}
                    onChange={(data) => {
                      setDetilsData({
                        ...detilsData,
                        count: data.target.value
                      })
                    }}
                  />
                </div>
              </div>
            </div>
            <div className="centerBox">
              <div className="centerHeaderBox">
                <div className="header">已使用次数：{detilsData.useCount}</div>
                <div className="headerMinBox align_center">
                  <div className="MinBox">
                    <div className="size">{detilsData.filmType}</div>
                    <div className="size">{detilsData.filmName}</div>
                  </div>
                </div>
              </div>
              <Divider style={{ margin: '15px 0' }} />
              <div className="centerHeaderBox">
                <div className="header">剩余次数：{detilsData.unUseCount}</div>
                <div className="headerMinBox align_center">
                  <div className="MinBox">
                    <div className="size">{detilsData.filmType}</div>
                    <div className="size">{detilsData.filmName}</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="footBox">
              <div className="align_center">
                <div className="footTitle">发货门店：</div>
                <span className="footSize">{detilsData.deliverStoreName}</span>
              </div>
              <div className="align_center">
                <div className="footTitle">发货人：</div>
                <span className="footSize">{detilsData.deliverName}</span>
              </div>
              <div className="align_center">
                <div className="footTitle">联系方式：</div>
                <span className="footSize">{detilsData.deliverStoreName}</span>
              </div>
              <div className="align_center">
                <div className="footTitle">发货时间：</div>
                <span className="footSize">{detilsData.deliverStoreName}</span>
              </div>

              <Divider style={{ margin: '15px 0' }} />
              <div className="align_center">
                <div className="footTitle">收货门店：</div>
                <span className="footSize">{detilsData.deliverStoreName}</span>
              </div>
              <div className="align_center">
                <div className="footTitle">收货人：</div>
                <span className="footSize">{detilsData.deliverName}</span>
              </div>
              <div className="align_center">
                <div className="footTitle">联系方式：</div>
                <span className="footSize">{detilsData.deliverStoreName}</span>
              </div>
            </div>
          </div>
          <div className="footButtonBox">
            <div
              className="footButtonCancel center"
              onClick={() => {
                setIsShowAdd(false)
              }}
            >
              取消
            </div>
            <div
              className="footButton center"
              onClick={() => {
                setIsShowAdd(false)
                changeCountFn()
              }}
            >
              确定
            </div>
          </div>
        </Modal>
      </div>
      <Modal
        title="详情"
        open={isShowDetils}
        footer={[]}
        onCancel={() => {
          setisShowDetils(false)
        }}
      >
        <div className="detilsBox">
          <div className="heder">
            <div className="hederSize align_center">
              <div>收货时间：{detilsData.timeOfReceipt}</div>
              <div>收货人：{detilsData.storeName}</div>
            </div>
            <div className="headerMinBox align_center">
              <div className="MinBox">
                <div className="title">产品类型</div>
                <div className="size">{detilsData.filmType}</div>
              </div>
              <div className="MinBox">
                <div className="title">产品名称</div>
                <div className="size">{detilsData.filmName}</div>
              </div>
              <div className="MinBox">
                <div className="title">产品数量</div>
                <div className="size">{detilsData.number}</div>
              </div>
            </div>
            <Divider style={{ margin: '15px 0' }} />
            <div className="headerfoot">
              <div className="title">
                质保编号：<span className="size">{detilsData.filmNo}</span>
              </div>
              <div className="title">
                质保年限：<span className="size">{detilsData.filmAge}</span>
              </div>
              <div className="title">
                总贴膜次数：<span className="size2">{detilsData.count}</span>
              </div>
            </div>
          </div>
          <div className="centerBox">
            <div className="centerHeaderBox">
              <div className="header">已使用次数：{detilsData.useCount}</div>
              <div className="headerMinBox align_center">
                <div className="MinBox">
                  <div className="size">{detilsData.filmType}</div>
                  <div className="size">{detilsData.filmName}</div>
                </div>
              </div>
            </div>
            <Divider style={{ margin: '15px 0' }} />
            <div className="centerHeaderBox">
              <div className="header">剩余次数：{detilsData.unUseCount}</div>
              <div className="headerMinBox align_center">
                <div className="MinBox">
                  <div className="size">{detilsData.filmType}</div>
                  <div className="size">{detilsData.filmName}</div>
                </div>
              </div>
            </div>
          </div>
          <div className="footBox">
            <div className="align_center">
              <div className="footTitle">发货门店：</div>
              <span className="footSize">{detilsData.deliverStoreName}</span>
            </div>
            <div className="align_center">
              <div className="footTitle">发货人：</div>
              <span className="footSize">{detilsData.deliverName}</span>
            </div>
            <div className="align_center">
              <div className="footTitle">联系方式：</div>
              <span className="footSize">{detilsData.deliverStoreName}</span>
            </div>
            <div className="align_center">
              <div className="footTitle">发货时间：</div>
              <span className="footSize">{detilsData.deliverStoreName}</span>
            </div>

            <Divider style={{ margin: '15px 0' }} />
            <div className="align_center">
              <div className="footTitle">收货门店：</div>
              <span className="footSize">{detilsData.deliverStoreName}</span>
            </div>
            <div className="align_center">
              <div className="footTitle">收货人：</div>
              <span className="footSize">{detilsData.deliverName}</span>
            </div>
            <div className="align_center">
              <div className="footTitle">联系方式：</div>
              <span className="footSize">{detilsData.deliverStoreName}</span>
            </div>
          </div>
        </div>
        <div className="center">
          <div
            className="footButton center"
            onClick={() => {
              setisShowDetils(false)
            }}
          >
            确定
          </div>
        </div>
      </Modal>
      {contextHolder}
    </div>
  )
}
export default App
